import ModalSlideUp from "@/components/composite/ModalSlideUp/main"
import { useModalSlideUp } from "@/features/useModal"
import { useSearchAction } from "@/features/useSearchAction"
import Deposit from "@/pages/UserCenterPage/subPages/Deposit"
import Withdraw from "@/pages/WithdrawAccounts/components/Withdraw"
import LoginPageV2 from "@/pages/LoginPageV2/page"
import { css } from "@emotion/react"
import { useIsomorphicLayoutEffect } from "ahooks"

export default function SearchActionLayout() {
    const { open, close } = useModalSlideUp("search-action")
    const { action, clearAction } = useSearchAction()

    useIsomorphicLayoutEffect(() => {
        switch (action) {
            case "deposit":
                open(<Deposit />, {
                    closeOnClickMask: true,
                    closeOnEscape: false,
                    onClose: clearAction,
                    position: "bottom",
                    animation: "fade",
                })
                break
            case "withdraw":
                open(<Withdraw />, {
                    closeOnClickMask: true,
                    closeOnEscape: false,
                    onClose: clearAction,
                })
                break
            case "login":
                open(
                    <div
                        css={css`
                            display: flex;
                            flex-direction: column;
                            border-radius: 16rem 16rem 0 0;
                            overflow: hidden;
                        `}
                    >
                        <LoginPageV2 />
                    </div>,
                    {
                        closeOnClickMask: true,
                        closeOnEscape: false,
                        onClose: clearAction,
                        position: "bottom",
                        animation: "slide-up",
                    },
                )
                break
            default:
                close()
                break
        }
    }, [action, clearAction, open, close])

    return <ModalSlideUp familyName="search-action" />
}
